<template>
	<div class="pay-container">
		<!-- 生成微信支付二维码 -->
		<div class="erwei">
			<img :src="payUrl" alt="">
		</div>
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-wechat_pay"></use>
		</svg>
		<span>使用微信进行支付</span>
		<el-descriptions title="订单详情">
			<el-descriptions-item label="订单号"></el-descriptions-item>
			<el-descriptions-item label="创建时间"></el-descriptions-item>
			<el-descriptions-item label="产品名称"></el-descriptions-item>
			<el-descriptions-item label="商品描述"></el-descriptions-item>
			<el-descriptions-item label="购买数量"></el-descriptions-item>
			<el-descriptions-item label="购买用户"></el-descriptions-item>
			<el-descriptions-item label="手机号"></el-descriptions-item>
			<el-descriptions-item label="总价格">
			</el-descriptions-item>

		</el-descriptions>

	</div>
</template>

<script>
//首先要获取订单id
import { mapState } from "vuex";
//引入生成二维码插件
import qrCode from "qrcode";
//引入获取订单和支付的方法
import * as api from "@/api/transaction"
export default {
	data() {
		return {
			order_id: "",//订单号
			//请求的订单详情
			orderDetail: {
				//数据初始化
				orderDetail: [
					{
						productName: "",
						description: "",
						quantity: "",
					},
				],
			},
			payUrlRes: {}, //请求获取的支付结果
			payUrl: "", //支付地址
		};
	},
	computed: {

	},
	created() {
		let { order_id } = this.$route.query;
		this.order_id = order_id;
		//3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
		if (!this.order_id) {
			//没有订单id 有可能用户刷新了页面
			//提示:本次交易取消,返回到预支付页面
			this.$alert("本次交易取消,请重新提交", "提示", {
				confirmButtonText: "确定",
				callback: (action) => {
					this.$router.push({ path: "/preorder" })
				},
			});

			return;
		}
		//1.根据订单id 请求订单详情
		//2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码

		//并发请求 一次发送多个请求 Promise.all([promise1,promise2])

		Promise.all([api.getOrderDetail(this.order_id), api.pay(this.order_id)])
			.then(res => {
				console.log(res)
				this.orderDetail = res[0].data.data;
				let paymentRes = res[1].data;
				if (paymentRes.state) {
					//获取支付地址
					let payUrl = paymentRes.code_url;

					//生成二维码

					qrCode.toDataURL(payUrl, (err, img) => {
						console.log(img)
						this.payUrl = img;
					})
				}
			})

		//轮询 查询支付状态
		//轮询的时候,一定要设置时间
		//设置200ms

		this.queryPayStatusInterval = setInterval(() => {
			api.queryPayStatus(this.order_id)
				.then(res => {
					console.log(res)
					if (res.data.state) {
						//跳转到支付成功这个页面
						this.$router.push({ path: "/payment/paysuccess" })
					}
					// else {
					// 	this.$router.push({ path: "/vipmanager/charge" })
					// }
				})
		}, 2000)
	},
	beforeDestroy() {
		//组件即将销毁的时候
		//清除定时器
		clearInterval(this.queryPayStatusInterval)
	},
};
</script>